<template>
	<view>
		<view class="top_box" @click="expertConsultation()">
			<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-banner@2x.png" class="top_img"></image>
		</view>
		<view class="region_styel region_a ">
			<view class="title_text">专业商标注册顾问为您提供服务</view>
			<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-pic1@2x.png" class="region_a_img"></image>
			<view class="content_box">
				<view class="item_box">
					<view class="item_left">
						<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon1@2x.png" class="region_icon">
						</image>
						<view class="region_text">申请成功率分析</view>
					</view>
					<view class="item_right">
						<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon1@2x.png" class="region_icon">
						</image>
						<view class="region_text">代填商标申请订单</view>
					</view>
				</view>
				<view class="item_box">
					<view class="item_left">
						<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon1@2x.png" class="region_icon">
						</image>
						<view class="region_text">商标设计建议</view>
					</view>
					<view class="item_right">
						<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon1@2x.png" class="region_icon">
						</image>
						<view class="region_text">递交商标局及流程跟进</view>
					</view>
				</view>
				<view class="item_box">
					<view class="item_left">
						<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon1@2x.png" class="region_icon">
						</image>
						<view class="region_text"> 申请方案制定</view>
					</view>
					<view class="item_right">
						<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon1@2x.png" class="region_icon">
						</image>
						<view class="region_text">......更多服务</view>
					</view>
				</view>
			</view>
		</view>
		<view class="region_styel region_b ">
			<view class="title_text">商标注册办理流程</view>
			<view class="min_title">全程一对一保姆式交易，保证您安心顺心</view>
			<view class="content_box">
				<view class="item_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-lc-icon1@2x.png" class="region_icon">
					</image>
					<view class="region_text"><text>在线咨询</text> 丨 售前咨询顾问评估风险</view>
				</view>
				<view class="process_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon2@2x.png" class="process_icon">
					</image>
				</view>
				<view class="item_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-lc-icon2@2x.png" class="region_icon">
					</image>
					<view class="region_text"><text>确认需求</text> 丨 对接顾问确定注册需求</view>
				</view>
				<view class="process_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon2@2x.png" class="process_icon">
					</image>
				</view>
				<view class="item_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-lc-icon3@2x.png" class="region_icon">
					</image>
					<view class="region_text"><text>提交资料</text> 丨 向专属顾问提交申请资料</view>
				</view>
				<view class="process_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon2@2x.png" class="process_icon">
					</image>
				</view>
				<view class="item_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-lc-icon4@2x.png" class="region_icon">
					</image>
					<view class="region_text"><text>递交官方</text> 丨 顾问递交申请材料至商标局</view>
				</view>
				<view class="process_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-icon2@2x.png" class="process_icon">
					</image>
				</view>
				<view class="item_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-lc-icon5@2x.png" class="region_icon">
					</image>
					<view class="region_text"><text>交易完成</text> 丨 等待商标局下发证书</view>
				</view>
			</view>
		</view>
		<view class="region_styel region_c ">
			<view class="title_text">商标注册的优势</view>
			<view class="content_box">
				<view class="item_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-ys-icon1@2x.png" class="item_left_icon">
					</image>
					<view class="item_right">
						<view class="title_c">树立品牌形象</view>
						<view class="introduce_text">区别于其他同类商品独家专有，在赢得消费 者信任的同时，树立家喻户晓的品牌形象。</view>
					</view>
				</view>
				<view class="item_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-ys-icon2@2x.png" class="item_left_icon">
					</image>
					<view class="item_right">
						<view class="title_c">企业品牌卫士</view>
						<view class="introduce_text">只有注册成功后的商标才能有R标记， 遇到 他人仿冒可通过法律维权，获得 经济赔偿。</view>
					</view>
				</view>
				<view class="item_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-ys-icon3@2x.png" class="item_left_icon">
					</image>
					<view class="item_right">
						<view class="title_c">企业无形资产</view>
						<view class="introduce_text">商标的评估价值是企业总资产的一部 分， 可作为无形资产进行转让、抵押 贷款等。</view>
					</view>
				</view>
			</view>
		</view>
		<view class="region_styel region_d ">
			<view class="title_text">商标注册所需资料</view>
			<view class="content_box">  
				<view class="list_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-cl-pic1@2x.png" class="list_icon">
					</image>
					<view class="list_box_bottom">
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">1</view>
								<view class="left_text">申请书</view>
							</view>
							<view class="right_text">商标顾问代准备</view>
						</view>
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">2</view>
								<view class="left_text">商标代理委托书</view>
							</view>
							<view class="right_text">商标顾问代准备</view>
						</view>
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">3</view>
								<view class="left_text">清晰商标图样</view>
							</view>
							<view class="right_text">企业自行准备</view>
						</view>
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">4</view>
								<view class="left_text">企业营业执照副本扫描件</view>
							</view>
							<view class="right_text">企业自行准备</view>
						</view>
					</view>
				</view>
				
				<view class="list_box">
					<image src="https://res.huibiaow.cn/xcx_cyolw/register/sbzc-cl-pic2@2x.png" class="list_icon">
					</image>
					
					<view class="list_box_bottom">
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">1</view>
								<view class="left_text">申请书</view>
							</view>
							<view class="right_text">商标顾问代准备</view>
						</view>
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">2</view>
								<view class="left_text">商标代理委托书</view>
							</view>
							<view class="right_text">商标顾问代准备</view>
						</view>
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">3</view>
								<view class="left_text">清晰商标图样</view>
							</view>
							<view class="right_text">个人自行准备</view>
						</view>
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">4</view>
								<view class="left_text">身份证正反面签字扫描件</view>
							</view>
							<view class="right_text">个人自行准备</view>
						</view>
						<view class="list">
							<view class="left_box">
								<view class="serialNumber">5</view>
								<view class="left_text">个体工商户执照扫描描件</view>
							</view>
							<view class="right_text">个人自行准备</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"> </view>
		<view class="btn_box" @click="expertConsultation()">
			<view class="btn">商标注册在线咨询</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
			}
		},
		methods: {
		//跳转到微信客服
		expertConsultation(){ 
			let _this =this;
			wx.openCustomerServiceChat({
				 extInfo: {url:'https://work.weixin.qq.com/kfid/kfcf6d12abc1bc978ac'},
				 corpId:'ww5dd97fa44d21426f',
				 success(res) {
				   console.log('成功打开客服聊天界面');
				 },
				 fail(err) {
				   console.log('打开客服聊天界面失败', err);
				 }
			}) 
		},
		}
	}
</script>

<style lang='scss'>
	page {
		background: #F5F6FA;
	}

	.top_box {

		.top_img {
			width: 750rpx;
			height: 600rpx;
		}
	}

	.region_styel {
		margin: 30rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.title_text {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
		color: #333333;
		padding-top: 50rpx;
		text-align: center;
	}

	.min_title {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #666666;
		text-align: center;
		margin-top: 20rpx;
	}

	.region_a {
		margin-top: -90px;
		/* height: 692rpx; */
		position: relative;
		z-index: 10;
		padding: 0rpx 30rpx 50rpx 30rpx;

		.region_a_img {
			width: 630rpx;
			height: 350rpx;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
		}

		.content_box {
			.item_box {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				margin-bottom: 30rpx;

				.region_icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				.region_text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
				}

				.item_left {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: nowrap;
					width: 45%;
				}

				.item_right {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: nowrap;
					flex: 1;
				}
			}
		}
	}

	.region_b {
		.content_box {
			margin-top: 40rpx;
			padding: 0rpx 0rpx 50rpx 0rpx;

			.item_box {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				padding-left: 90rpx;
				margin-bottom: 10rpx;

				.region_icon {
					width: 65rpx;
					height: 65rpx;
					margin-right: 30rpx;
				}

				.region_text {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					text {
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
					}
				}
			}

			.process_box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;

				.process_icon {
					width: 24rpx;
					height: 12rpx;
				}
			}

		}
	}

	.region_c {
		padding: 0rpx 30rpx 30rpx 30rpx;

		.content_box {
			margin-top: 60rpx;

			.item_box {
				background: linear-gradient(180deg, #FFFFFF 0%, #FFF7F1 100%);
				border-radius: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: nowrap;
				padding: 28rpx 26rpx;
				margin-bottom: 20rpx;

				.item_left_icon {
					width: 105rpx;
					height: 105rpx;
					flex-shrink: 0;
					margin-right: 15rpx;
				}

				.item_right {
					.title_c {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
						margin-bottom: 12rpx;
					}

					.introduce_text {
						ont-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 36rpx;
					}
				}
			}
		}
	}

	.region_d {
		padding: 0rpx 30rpx 30rpx 30rpx;
		margin-bottom: 25rpx;
		.content_box {
			margin-top: 30rpx;
			.list_box {
				margin-bottom: 30rpx;
				.list_icon {
					width: 100%;
					height: 100rpx; 
				}

				.list_box_bottom {
					background: #FFFFFF;
					border-radius: 0rpx 0rpx 20rpx 20rpx;
					border: 2rpx solid #CEDDF8;
					padding: 30rpx 30rpx 0rpx 30rpx;
					margin-top: -4px;
					.list {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						flex-wrap: nowrap;
						margin-bottom: 38rpx;
						.left_box {
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							flex-wrap: nowrap;

							.serialNumber {
								width: 24rpx;
								height: 24rpx;
								background: #769BD0;
								border-radius: 50%;
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 17rpx;
								color: #FFFFFF;
								line-height: 24rpx;
								text-align: center;
								margin-right: 8rpx;
							}

							.left_text {
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #333333;
							}
						}

						.right_text {
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #769BD0;
						}
					}
				}
			}
			.list_box:last-child{
				.list_box_bottom {
					border: 2rpx solid #FF9B4E !important;
				}
				.serialNumber{
					background: #FF9B4E !important;
				}
				.right_text{
					color: #FF9B4E !important;
				}
			}
		}
	}
	.btn_box{
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		.btn{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #F5F6FA;
			height: 80rpx;
			background: linear-gradient(90deg, #FFA766 0%, #FD6F29 100%);
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 10rpx 30rpx;
		}
	}
</style>